@use "sass:map";

.user-stats-card {
  padding: 0 20px;
  min-height: 400px;
}

.stats-full-width-graph {
  width: 100%;
  max-width: 100%;
  // Default height just in case, otherwise nivo charts don't get rendered
  height: 100px; // override this
  min-height: 250px;

  &.user-listening-activity {
    aspect-ratio: 3.5;
    min-height: 350px;
    height: calc(100% * 0.3);
  }
  &.user-listen-heatmap {
    aspect-ratio: 3;
    height: calc(100% * 0.3);
  }
  &.user-artist-map {
    aspect-ratio: 2;
    height: calc(100% * 0.6);
    position: relative;
  }
  &.user-artist-map path[fill]:not([fill="#efefef"]):not([fill="none"]) {
    cursor: pointer;
  }
}

$bar-height: 4.5em;
.bar-chart {
  position: relative;
  width: 100%;
  margin-bottom: 1em;
  min-height: calc(25 * $bar-height); // 25 items on the graph
  > * {
    position: absolute;
    width: 100%;
  }
  .graph-tooltip {
    z-index: 100;
    background: white;
    padding: 9px 12px;
    border: 1px solid #ccc;
    width: 300px;
  }
  foreignObject {
    //default width and height, they are overwritten in the CustomBarComponent
    width: 95%;
    height: $bar-height;
    padding: 0.5em;
    overflow: visible;
    .graph-bar {
      height: 100%;
      gap: 0.6em;
      .position {
        margin: 0;
        flex: 0;
        border-right: 1px solid grey;
        padding-right: 0.6em;
        font-size: smaller;
        white-space: nowrap;
        text-align: center;
      }
      align-items: center;
      > .graph-bar-text {
        overflow: auto;
        min-width: 150px;
      }
      .graph-bar-entity {
        font-weight: bold;
        color: $gray-700;
      }
      .graph-bar-artist {
        color: $gray-500;
        font-size: 0.8em;
      }
    }
    @media (max-width: map.get($grid-breakpoints, "xs")) {
      // On mobile, show the position to the right of the bar to leave more space for the text
      .graph-bar {
        position: relative;
        .position {
          position: absolute;
          border: none;
          left: calc(100% + 1.2em);
        }
      }
    }
  }
  @media (max-width: map.get($grid-breakpoints, "sm")) {
    width: calc(100vw - 2em);
  }
}
.top-entity-listencards {
  display: flex;
  flex-wrap: wrap;
  gap: 0 $listen-card-margin-bottom;
  .listen-card {
    flex: 1;
    flex-basis: 360px;
    max-width: 100%;
    .main-content .right-section {
      flex: 0;
    }
  }
}
.release-cards-grid.top-entity-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
  place-content: space-evenly;
}
.custom-tooltip-genre-stats {
  background: white;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  opacity: 0.9;
}
